<template>
  <div class="home">
    <!-- 搜索 -->
    <router-link to="/home/search">
      <van-search placeholder="请输入搜索关键词" shape="round" />
    </router-link>
    <!-- 轮播图 -->
    <div class="swipe-item">
      <van-swipe class="my-swipe" :autoplay="30000" indicator-color="white">
        <van-swipe-item v-for="item in homeInfo.banner" :key="item.id">
          <img class="banner" :src="item.image_url" alt="" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- 导航栏 -->
    <div>
      <van-grid :column-num="5" :border="false">
        <van-grid-item icon="photo-o" text="家居" />
        <van-grid-item icon="photo-o" text="餐厨" />
        <van-grid-item icon="photo-o" text="服装" />
        <van-grid-item icon="photo-o" text="旅行" />
        <van-grid-item icon="photo-o" text="兴趣" />
      </van-grid>
    </div>
    <!-- 品牌制造商直供 -->
    <div class="brand">
      <div class="brand-title">品牌制造商直供</div>
      <div class="brand-item-container">
        <div class="item" v-for="item in homeInfo.brandList">
          <div class="info">
            <div class="name">{{ item.name }}</div>
            <div class="price">{{ item.floor_price }}元起</div>
          </div>
          <div class="brand-img">
            <img :src="item.list_pic_url" alt="" />
          </div>
        </div>
      </div>
    </div>
    <!-- 新品首发 -->
    <div class="new-product">
      <router-link to="/home/list?id=1">
        <img
          src="http://jinglins.gitee.io/bufan-tesco-mall/assets/new-product-pic-ab17c35e.png"
          alt=""
      /></router-link>
    </div>

    <!-- 新品列表 -->
    <div class="new-product-list">
      <div class="new-product-item" v-for="item in homeInfo.newGoods">
        <img :src="item.list_pic_url" alt="" />
        <div class="product-name">{{ item.name }}</div>
        <div class="product-desc">{{ item.goods_brief }}</div>
        <div class="product-price">￥{{ item.retail_price }}</div>
      </div>
    </div>

    <!-- 人气推荐/好物精选 -->
    <div class="hot-recom">
      <router-link to="/home/list?id=2">
        <img
          src="http://jinglins.gitee.io/bufan-tesco-mall/assets/hot-recom-pic-743969c3.png"
          alt=""
        />
      </router-link>
    </div>

    <!-- 新品列表 -->
    <div class="new-product-list">
      <div class="new-product-item" v-for="item in homeInfo.hotGoods">
        <img :src="item.list_pic_url" alt="" />
        <div class="product-name">{{ item.name }}</div>
        <div class="product-desc">{{ item.goods_brief }}</div>
        <div class="product-price">￥{{ item.retail_price }}</div>
      </div>
    </div>
    <!-- 专题精选 -->
    <div class="topic">
      <div class="topic-title">专题精选</div>
      <div class="topic-list">
        <div class="topic-list-item" v-for="item in homeInfo.topicList">
          <img :src="item.item_pic_url" alt="" />
          <div class="topic-list-name">{{ item.title }}</div>
          <div class="topic-listt-desc">{{ item.subtitle }}</div>
        </div>
      </div>
    </div>

    <!-- 居家好物 -->
    <div class="category-list">
      <div v-for="item in homeInfo.newCategoryList">
        <div class="item-title">{{ item.name }}好物</div>
        <div class="sub-list">
          <div class="sub-item" v-for="ele in item.goodsList">
            <img class="img" :src="ele.list_pic_url" alt="" />
            <p class="subitem-name">{{ ele.name }}</p>
            <p class="subitem-price">￥{{ ele.retail_price }}</p>
          </div>
        </div>
          <div class="last-item">
            <p>{{ item.name }}好物</p>
            <img
              src=""
              alt=""
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { index } from "@/views/api/home/index";

export default {
  data() {
    return {
      homeInfo: {},
    };
  },
  computed: {},
  created() {
    index({
      id: 1,
    }).then((res) => {
      console.log(res);
      this.homeInfo = res;
    });
  },
  mounted() {},
  methods: {},
};
</script>
<style scoped lang='scss'>
@import "./scss/index.scss";
</style>